<template>
  <div class="user-chart" v-loading="loading">
    <div class="subject">库存使用情况</div>
    <div class="chart" ref="userchart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getstockUseStatus } from '@/api/dashboard'
export default {
  name: 'UserChart',
  data () {
    return {
      seriesleft: [],
      seriesright: [],
      loading: false
    }
  },
  created () {
    this.getstockUseStatus()
  },
  methods: {
    async getstockUseStatus () {
      this.loading = true
      const res = await getstockUseStatus()
      this.seriesleft = res[0]
      this.seriesright = res[1]
      this.$nextTick(() => {
        this.getChart()
      })
      this.loading = false
    },
    getChart () {
      const myChart = echarts.init(this.$refs.userchart)
      myChart.setOption({
        color: ['#ffaa00', '#e4dbda'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} :{d}%'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold',
                color: ['#ffaa00', '#e4dbda']
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '可用库存' },
              { value: 735, name: '冻结库存' }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .user-chart {
    width: 30%;
    height: 354px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;
    padding: 25px;
    margin-right: 30px;
    .subject {
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
    }
    .chart {
      height: 280px;
      width: 100%;
    }
  }
</style>
